<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电动汽车市场分析系统</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        body {
            display: flex;
            height: 100vh;
            background: url('car.png') no-repeat center center fixed;
            background-size: cover;
        }

        .market-analysis {
            width: 50%;
        }

        .login-section {
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: transparent;
        }

        .login-box {
            width: 100%;
            max-width: 600px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
            padding: 60px;
            margin: 20px;
            backdrop-filter: blur(5px);
        }

        .logo {
            margin-bottom: 40px;
            text-align: center;
        }

        .logo h1 {
            color: #1e3a8a;
            font-size: 48px;
            margin-bottom: 20px;
            font-weight: 600;
        }

        .form-group {
            margin-bottom: 30px;
            width: 100%;
        }

        .form-group label {
            display: block;
            margin-bottom: 15px;
            color: #555;
            font-weight: 600;
            font-size: 28px;
        }

        .form-group input {
            width: 100%;
            padding: 20px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            font-size: 28px;
            transition: all 0.3s ease;
        }

        .form-group input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
            outline: none;
        }

        .btn-login {
            width: 100%;
            padding: 20px;
            background-color: #1e3a8a;
            color: white;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-size: 28px;
            font-weight: 600;
            margin-top: 20px;
            transition: all 0.3s ease;
        }

        .btn-login:hover {
            background-color: #1d4ed8;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .form-footer {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            width: 100%;
        }

        .form-footer a {
            color: #64748b;
            text-decoration: none;
            font-size: 24px;
            transition: color 0.3s ease;
        }

        .form-footer a:hover {
            color: #3b82f6;
            text-decoration: underline;
        }

        #registerForm, #changePasswordForm {
            display: none;
            width: 100%;
        }

        .error-message {
            color: #ef4444;
            font-size: 24px;
            margin-top: 20px;
            text-align: center;
        }

        @media (max-width: 768px) {
            body {
                flex-direction: column;
            }

            .market-analysis, .login-section {
                width: 100%;
                height: 50%;
            }

            .login-box {
                margin: 20px 0;
                padding: 40px;
            }

            .logo h1 {
                font-size: 36px;
            }

            .form-group label,
            .form-group input,
            .btn-login,
            .form-footer a,
            .error-message {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="market-analysis"></div>

    <div class="login-section">
        <div class="login-box">
            <div class="logo">
                <h1>电动汽车市场分析系统</h1>
            </div>

            <!-- 登录表单 -->
            <form id="loginForm">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" placeholder="请输入用户名">
                </div>

                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" placeholder="请输入密码">
                </div>

                <button type="submit" class="btn-login">登录</button>

                <div class="form-footer">
                    <a href="#" id="showRegister">注册</a>
                    <a href="#" id="showChangePassword">修改密码</a>
                </div>

                <div id="loginError" class="error-message"></div>
            </form>

            <!-- 注册表单 -->
            <form id="registerForm">
                <div class="form-group">
                    <label for="reg-username">用户名</label>
                    <input type="text" id="reg-username" placeholder="请输入用户名">
                </div>

                <div class="form-group">
                    <label for="reg-phone">手机号</label>
                    <input type="tel" id="reg-phone" placeholder="请输入手机号">
                </div>

                <div class="form-group">
                    <label for="reg-password">密码</label>
                    <input type="password" id="reg-password" placeholder="请输入密码">
                </div>

                <div class="form-group">
                    <label for="reg-confirm-password">确认密码</label>
                    <input type="password" id="reg-confirm-password" placeholder="请再次输入密码">
                </div>

                <button type="submit" class="btn-login">注册</button>

                <div class="form-footer">
                    <a href="#" id="showLoginFromRegister">返回登录</a>
                </div>

                <div id="registerError" class="error-message"></div>
            </form>

            <!-- 修改密码表单 -->
            <form id="changePasswordForm">
                <div class="form-group">
                    <label for="change-username">用户名</label>
                    <input type="text" id="change-username" placeholder="请输入用户名">
                </div>

                <div class="form-group">
                    <label for="change-phone">手机号</label>
                    <input type="tel" id="change-phone" placeholder="请输入注册手机号">
                </div>

                <div class="form-group">
                    <label for="new-password">新密码</label>
                    <input type="password" id="new-password" placeholder="请输入新密码">
                </div>

                <button type="submit" class="btn-login">修改密码</button>

                <div class="form-footer">
                    <a href="#" id="showLoginFromChange">返回登录</a>
                </div>

                <div id="changeError" class="error-message"></div>
            </form>
        </div>
    </div>

    <script>
        // 表单切换逻辑
        document.getElementById('showRegister').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('loginForm').style.display = 'none';
            document.getElementById('registerForm').style.display = 'block';
            document.getElementById('changePasswordForm').style.display = 'none';
        });

        document.getElementById('showChangePassword').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('loginForm').style.display = 'none';
            document.getElementById('registerForm').style.display = 'none';
            document.getElementById('changePasswordForm').style.display = 'block';
        });

        document.getElementById('showLoginFromRegister').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('registerForm').style.display = 'none';
            document.getElementById('loginForm').style.display = 'block';
            document.getElementById('changePasswordForm').style.display = 'none';
        });

        document.getElementById('showLoginFromChange').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('changePasswordForm').style.display = 'none';
            document.getElementById('loginForm').style.display = 'block';
            document.getElementById('registerForm').style.display = 'none';
        });

        // 登录表单提交
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const errorElement = document.getElementById('loginError');

            if (!username || !password) {
                errorElement.textContent = '用户名和密码不能为空';
                return;
            }

            fetch('http://localhost:5001/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: username,
                    password: password
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.href = '全国电动汽车销售数据可视化平台.html';
                } else {
                    errorElement.textContent = data.message || '登录失败';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                errorElement.textContent = '连接服务器失败';
            });
        });

        // 注册表单提交
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const username = document.getElementById('reg-username').value;
            const phone = document.getElementById('reg-phone').value;
            const password = document.getElementById('reg-password').value;
            const confirmPassword = document.getElementById('reg-confirm-password').value;
            const errorElement = document.getElementById('registerError');

            if (!username || !phone || !password || !confirmPassword) {
                errorElement.textContent = '所有字段都必须填写';
                return;
            }

            if (password !== confirmPassword) {
                errorElement.textContent = '两次输入的密码不一致';
                return;
            }

            if (!/^1[3-9]\d{9}$/.test(phone)) {
                errorElement.textContent = '请输入有效的手机号码';
                return;
            }

            fetch('http://localhost:5001/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: username,
                    phone: phone,
                    password: password
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('注册成功！请登录');
                    document.getElementById('registerForm').style.display = 'none';
                    document.getElementById('loginForm').style.display = 'block';
                    errorElement.textContent = '';
                } else {
                    errorElement.textContent = data.message || '注册失败';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                errorElement.textContent = '连接服务器失败';
            });
        });

        // 修改密码表单提交
        document.getElementById('changePasswordForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const username = document.getElementById('change-username').value;
            const phone = document.getElementById('change-phone').value;
            const newPassword = document.getElementById('new-password').value;
            const errorElement = document.getElementById('changeError');

            if (!username || !phone || !newPassword) {
                errorElement.textContent = '所有字段都必须填写';
                return;
            }

            if (!/^1[3-9]\d{9}$/.test(phone)) {
                errorElement.textContent = '请输入有效的手机号码';
                return;
            }

            fetch('http://localhost:5001/change-password', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: username,
                    phone: phone,
                    new_password: newPassword
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('密码修改成功！请登录');
                    document.getElementById('changePasswordForm').style.display = 'none';
                    document.getElementById('loginForm').style.display = 'block';
                    errorElement.textContent = '';
                } else {
                    errorElement.textContent = data.message || '密码修改失败';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                errorElement.textContent = '连接服务器失败';
            });
        });
    </script>
</body>
</html>